@use "../core/color";
@use "../core/layout";
@use "../core/typography";

.group-invite__container {
  position: relative;
  max-width: layout.$search-result-sidebar-width;
}

.group-invite__input {
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 22px;  /* Make space for the clipboard icon. */
  padding-top: 0;
  margin-top: 5px;
  margin-bottom: 8px;
  border: 1px solid color.$grey-3;
  border-radius: 2px;
  width: 100%;
  height: 31px;
  text-overflow: ellipsis;
  color: color.$grey-6;
}

.group-invite__clipboard-button {
  background: none;
  height: 28px;
  width: 23px;
  border: none;
  position: absolute;
  right: 0;
  top: 5px;
  margin-right: 5px;

  display: none;
  .env-js-capable & {
    display: block;
  }
  .env-js-timeout & {
    display: none;
  }
}

.group-invite__clipboard-button:focus {
  outline: none;
}

.group-invite__clipboard-image {
  // Vertically center the image inside its parent <button>.
  margin-top: 5px;
  margin-bottom: 5px;

  width: 13px;
  height: 16px;

  color: color.$grey-4;
}

.group-invite__clipboard-button:hover > .group-invite__clipboard-image {
  color: color.$grey-7;
}

// On mobile, increase the size of the 'Copy to clipboard' button to make it
// easier to tap.
@include layout.touch-input {
  .group-invite__input {
    font-size: typography.$touch-input-font-size;
  }

  .group-invite__input {
    padding-right: layout.$touch-target-size;
  }

  .group-invite__clipboard-button {
    width: layout.$touch-target-size;
  }
}
